<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text {
            /* 字体颜色 */
            color: #00ffdd;
            /* 字体大小 字体最小12px 再小不生效 */
            font-size: 15px;
            /* 字体加粗  bold:定义粗体 bolder:定义更粗的字符 lighter:定义更细的字符 100-900:定义由细到粗 700默认=bold */
            font-weight: bold;
            /* 指定文本的字体样式  normal:默认值 italic:定义斜体字 */
            font-style: italic;
            /* 指定一个元素的字体  "Simsun","微软雅黑" */
            font-family: "Micorosoft YaHei", ;
        }

        .background {
            width: 400px;
            height: 400px;
            /* 背景颜色 */
            background-color: #00ffdd;
            /* 背景设置为图片填充 */
            background-image: url("../../dhtml/1.webp");
            /* 图片背景填充的平铺方式  repeat:默认值(水平)  repeat-x:只向水平方向平铺 repeat-y:只向垂直方向平铺 no-repeat:不平铺*/
            background-repeat: repeat;
            /* 设置背景图像的大小 
       length:100px   设置背景图片的宽度和高度,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto 
       percentage:100% 100%  
       cover:保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小  background-size:cover;
       contain:保持图片纵横比并将图片缩放成适合背景定位区域的最大大小  background-size:contain;
       */
            background-size: length;
            /*该署行设置背景图片的启始位置  */
            background-position: left center;
        }

        h1 {
            /* 指定元素文本的水皮对齐方式 */
            text-align: center;
            /* 属性规定添加到文本的修饰,下划线,上划线,删除线等 underline:定义下划线 overline:定义上划线 line-through:定义删除线  */
            text-decoration: underline;
            /* 控制文本的大小写 capitalize:定义每个单词开头大写 uppercase:定义全部大写字母 lowercase:定义全部小写字母  */
            text-transform: capitalize;
            /* text-indent 属性规定文件块中首行文本的缩进 负债是允许的 如果值是负数,将第一行左缩进 */
            text-indent: 20%;
        }

        table,
        td {
            /* 边框1px  solid  颜色 */
            border: 1px solid rebeccapurple;
        }

        table {
            /*边框折叠 单边框  */
            border-collapse: collapse;
        }
        td {
            /* 设置边距 */
            padding: 20px;
            /* 表格内容对其方式 */
            text-align: center;
            /* 竖直对齐方式 */
            vertical-align: top;
            /* 背景颜色 */
            background-color: antiquewhite;
        }
       /* 后代关系选择器 */
       ul li{
         color: red;
        font-size: 20px;
       }
       /* 子代关系选择器  只有直接后代可以 */
       ul>li{
        background-color: #00ffdd;
       }
       /* 相邻兄弟选择器 选择紧跟E元素 "之后" 的F元素 用加号表示,选择相邻的第一个兄弟元素 只能向下找*/
       h3+p{
          color: red; 
       }
       /* 通用兄弟选择器 选择E元素  "之后"   的所有兄弟元素F,作用于多个元素,用~隔开*/
       h3~p{
        font-style: italic;

       }
    </style>
</head>
<body>


    <p class="text"></p>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <div>
            <ol>
                <li>茄子1</li>
                <li>茄子2</li>
            </ol>

        </div>
    </ul>
    <ol>
        <li>面条1</li>
        <li>面条2</li>
    </ol>
    <p>我是内容0</p>
    <h3>我是标题</h3>
    <p>我是内容1</p>
    <p>我是内容2</p>





</body>

</html>